import React from 'react';
import ClassNames from 'classnames';
import RenderJudge from '@/components/RenderJudge';
import Emoji from '@/components/Emoji';
import { empty } from '@/common/utils';
import MessageItemStyle from './MessageItemStyle';

import styles from '../style/MessageItem.scss';

const MessageItem = ({ list }) => list.map((row, index) => {
  const rRow = row || {};
  const { messageType, username, message } = rRow;

  return (
    <React.Fragment key={index}>
      {/* 欢迎消息 */}
      <RenderJudge
        value={messageType === 100006}
        active={(
          <div className={styles.container}>
            <span className={styles.label} style={{ color: '#999' }}>欢迎</span>
            <span className={styles.label} style={{ color: '#333', padding: '0 6px' }}>{username}</span>
            <span className={styles.label} style={{ color: '#999' }}>进入直播间</span>
          </div>
        )}
      />
      {/* 机器人发言 */}
      <RenderJudge
        value={messageType === 100021}
        active={(
          <div className={styles.container}>
            <span className={ClassNames(styles.label, styles.isName)}>{`${username}：`}</span>
            <span className={styles.label}>{message}</span>
          </div>
        )}
      />
      {/* 用户发言 */}
      <RenderJudge
        value={[100004, 100005].includes(messageType)}
        active={(
          <MessageItemStyle data={rRow}>
            {({ icon, nameColor, backgroundColor }) => (
              <div className={styles.container} style={{ backgroundColor }}>
                <RenderJudge
                  value={icon}
                  active={(
                    <img src={icon} className={styles.icon} />
                  )}
                />
                <span
                  className={ClassNames(styles.label, styles.isName)}
                  style={{ color: nameColor }}
                >
                  {`${username}：`}
                </span>
                <Emoji className={styles.label} text={message} />
              </div>
            )}
          </MessageItemStyle>
        )}
      />
    </React.Fragment>
  );
});

MessageItem.defaultProps = {
  list: [],
  onSetMessage: empty,
};

export default MessageItem;
